import { HashRouter as Router, Route, Link, Routes, Navigate, useResolvedPath, useNavigate } from 'react-router-dom'
import { useEffect } from 'react';
import Register from '../pages/user/register.jsx'
import Login from '../pages/user/login.jsx'
import Certification from '../pages/user/certification.jsx'
import Header from '../pages/layout/header/header'
import Content from '../pages/content/content'
import store from '../store/store.js'
function Index() {
    return (
        <div className="index">
            <Header></Header>
            <Content></Content>
        </div>
    )
}
const whiteName = ['/register', '/login', '/login_c']

function RouteGuard(props) {
    console.log('props', props)
    const path = useResolvedPath('')
    if (whiteName.indexOf(path) > -1) return props.components
    let state = store.getState()
    if (state.isLogin) {
        return props.components
    } else {
        return <Login/>
    }
}

const routerList = [
    {
        path: '/',
        name: '首页',
        component: <RouteGuard components={<Index/>}/>
    },
    {
        path: '/register',
        name: '注册页',
        component: <RouteGuard components={<Register/>}/>
    },
    {
        path: '/login',
        name: '登录页',
        component: <RouteGuard components={<Login/>}/>
    },
    {
        path: '/login_c',
        name: '统一认证',
        component: <RouteGuard components={<Certification/>}/>
    }
]

function RouterX() {
    return (
        <Router>
            <Routes>
            {
                routerList.map(item => 
                    <Route key={item.path} path={item.path}
                        element={item.component}>
                    </Route>
                )
            }
            </Routes>
        </Router>
    )
}

export default RouterX